/* ================================================== */
/* 核心 CSS 样式：全局居中修复版 (最终版 V5 - 区域收窄并居中) */
/* ================================================== */



/* 1. 设置视口和 3D 舞台 */
.viewport {

    /* 【核心修正 A】：限制视口宽度为 80% (两侧留出 10% 黑色边距) */
    width: 80%; 
    max-width: 1200px; /* 可选：设置一个最大宽度，防止在超宽屏上过大 */
    margin: 0 auto; /* 【核心修正 B】：水平居中视口 */
    
    perspective: 1px; 
    perspective-origin: 50% 50%; 
    
    position: relative; /* 改为 relative，使其可以被 margin 居中 */
    top: 0;
    left: 0;
    background-color: transparent; 
}



/* 6. 前景内容居中 */
.parallax-layer.base > * {
    margin: 10px auto; 
    display: block;
}

/* 7. 加载图与堆叠图层 */
#preloader {
    position: fixed; 
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #000000; 
    z-index: 99999; 
    display: flex;
    justify-content: center; 
    align-items: center; 
    opacity: 1;
    transition: opacity 0.5s ease;
}

/* ... 保持其他加载器和堆叠图层样式不变 ... */
#layered-images-stack {
    position: relative; 
    width: 300px; height: 300px;     
    margin: 50px auto; 
    z-index: 20; 
}
.stacked-image {
    position: absolute; 
    top: 0; left: 0;
    max-width: 100%; height: auto;
    pointer-events: none; 
    object-fit: contain; 
    display: block; 
}



/* ================================================== */
/* 完美对齐与 JS 辅助交互样式 */
/* -------------------------------------------------- */

/* 1. 容器设置：作为鼠标监听的基准 */
#layered-images-stack {
    position: relative;
    /* 确保容器本身能捕获鼠标移动，JS 将计算相对坐标 */
    pointer-events: auto; 
}

/* 2. 基础图片样式：绝对定位，完美重叠 */
.stacked-image, 
.center-wrapper, 
.center2-rotator,
.center-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 核心：禁止 CSS 自身的鼠标响应，完全由 JS 接管 */
    pointer-events: none; 
}

/* 确保图片缩放模式正确 */
.stacked-image, .center-content {
    object-fit: contain;
    display: block;
    transition: filter 0.1s ease-out; /* 快速响应反相 */
}


/* ================================================== */
/* 交互状态：当 JS 判定命中时，给 img 添加 .active 类 */
/* -------------------------------------------------- */

/* 激活状态：反相 */
.center-content.active {
    filter: invert(100%);
}

/* 激活状态：颤抖动画 */
.center-content.active {
    /* 使用 translate3d 开启硬件加速，不影响父级旋转 */
    animation: shake-hard 0.15s infinite;
}

/* 猛烈颤抖动画 */
@keyframes shake-hard {
    0% { transform: translate3d(1px, 1px, 0); }
    25% { transform: translate3d(-2px, -2px, 0); }
    50% { transform: translate3d(-2px, 1px, 0); }
    75% { transform: translate3d(2px, -1px, 0); }
    100% { transform: translate3d(1px, 1px, 0); }
}

/* 辅助层级 (Top/Bottom) */
.layer-A { z-index: 10; }
.layer-C { z-index: 50; pointer-events: none; }

/* ================================================== */
/* 堆叠层级修正 (V28) */
/* ================================================== */

/* 新的最底层 */
.stacked-image.layer-Bottom { 
    z-index: 5; /* 确保它低于所有其他层 */
}

/* bottom.png (作为下一层) */
.stacked-image.layer-A { 
    z-index: 10; /* 略高于新的最底层 */
}

/* 原始的 top.png 样式 (现在应该已经不需要了) */
/* 如果您之前用 layer-C 代替 top.png，请确保这个z-index不再冲突 */
.stacked-image.layer-C { 
    z-index: 50; /* 如果这层仍存在，它的 z-index 应该最高 */
}